<template>
  <ui-page class="routine-inspection-container container">
    <div class="select-bar bg-color">
      <ui-table-select
          ref="select"
          :reset="true"
          @ready="onSelectReady"
          @search="getSearchParams"
      >
        <ui-table-select-item
            name="time"
            label="统计时间"
            type="datetimerange"
            :clearable="false"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            :default-value="defaultTime"
        />
        <ui-table-select-item name="employeeId" label="员工" placeholder="请选择员工" show-label type="select"
                              start-null url="/Ent/EntEmployee/selectList" :params="{tenantId: userInfo.tenantId}"
                              :props="{value: 'employeeId', label: 'name'}"/>
        <ui-table-select-item name="departmentId" label="部门" placeholder="请选择部门" show-label type="select"
                              start-null url="/Ent/EntDepartment/selectList" :params="{tenantId: userInfo.tenantId}"
                              :props="{value: 'id', label: 'name'}"/>
      </ui-table-select>
    </div>
    <div class="chart-container">
      <div class="chart-items">
        <div class="chart-item inspection-results-chart bg-color">
          <CheckInResults :params="params" />
        </div>
        <div class="chart-item inspection-results-chart bg-color">
          <OvertimeResults :params="params" />
        </div>
      </div>
      <div class="chart-items">
        <div class="chart-item inspection-results-chart bg-color">
          <LeaveResults :params="params" />
        </div>
        <div class="chart-item inspection-results-chart bg-color">
          <GoOutResults :params="params" />
        </div>
      </div>
    </div>
    <div class="table-wrap bg-color">
      <div class="title">人员考勤排行榜</div>
      <ui-fill-view class="table-fill-view">
        <ui-table
            v-bind="table.config"
            ref="table"
            :params="listParams"
        >
          <template v-slot:search-bar>
            <div style="padding: 10px;">
              <ui-table-select v-model="table.model.select" :reset="true">
                <ui-table-select-item name="condition" label="统计条件" placeholder="请选择统计条件" show-label type="select"
                                      :data="conditionList" start-null/>
                <ui-table-select-item name="order" label="统计顺序" placeholder="请选择统计顺序" show-label type="select"
                                      :data="orderList" start-null/>
                <ui-table-select-item name="time" label="统计时间范围" placeholder="请选择时间范围" show-label
                                      type="datetimerange" start-null/>
              </ui-table-select>
            </div>
          </template>
          <ui-table-column label="序号" type="index" min-width="120" fixed/>
          <ui-table-column prop="entId" label="员工编号" min-width="120"/>
          <ui-table-column prop="entName" label="员工姓名" min-width="120" fixed/>
          <ui-table-column prop="depName" label="部门名称" min-width="120"/>
          <ui-table-column prop="goOutCount" label="外出次数" min-width="120"/>
          <ui-table-column prop="overtimeCount" label="加班次数" min-width="120"/>
          <ui-table-column prop="overTimeDuration" label="加班时长/h" min-width="120">
            <template v-slot:default="{row}">
              {{ row.overTimeDuration ? (row.overTimeDuration / 3600).toFixed(2) : '-' }}
            </template>
          </ui-table-column>
          <ui-table-column prop="leaveCount" label="请假次数" min-width="120"/>
          <ui-table-column prop="leaveTimeDuration" label="请假时长/h" min-width="120">
            <template v-slot:default="{row}">
              {{ row.leaveTimeDuration ? (row.leaveTimeDuration / 3600).toFixed(2) : '-' }}
            </template>
          </ui-table-column>
          <ui-table-column prop="notCheckInSum" label="上班未打卡次数" min-width="120"/>
          <ui-table-column prop="notCheckOutSum" label="下班未打卡次数" min-width="120"/>
          <ui-table-column prop="inReissueCardSum" label="上班补卡次数" min-width="120"/>
          <ui-table-column prop="outReissueCardSum" label="下班补卡次数" min-width="120"/>
          <ui-table-column prop="lateSum" label="迟到次数" min-width="120"/>
          <ui-table-column prop="leaveEarlySum" label="早退次数" min-width="120"/>
          <!--   分页   -->
          <template v-slot:footer-bar>
            <ui-table-pagination/>
          </template>
        </ui-table>
      </ui-fill-view>
    </div>
  </ui-page>
</template>

<script>
import CheckInResults from "../Attendance/AttendenceStatistics/CheckInResults";
import OvertimeResults from "./AttendenceStatistics/OvertimeResults";
import LeaveResults from "./AttendenceStatistics/LeaveResults";
import GoOutResults from "./AttendenceStatistics/GoOutResults";
import moment from "moment";
import {mapState} from "vuex";

export default {
  name: "AttendanceStatistics",
  components: {
    CheckInResults,
    OvertimeResults,
    LeaveResults,
    GoOutResults,
  },
  data() {
    return {
      table: {
        config: {
          url: "",
        },
        data:{},
        model: {
          select: {},
        },
      },
      params: {},
      listParams: {},
      conditionList: [
        {value: 'goOutCount', label: '外出次数'}, {value: 'overtimeCount', label: '加班次数'},
        {value: 'leaveCount', label: '请假次数'}, {value: 'notCheckInSum', label: '上班未打卡次数'},
        {value: 'notCheckOutSum', label: '下班未打卡次数'}, {value: 'inReissueCardSum', label: '上班补卡次数'},
        {value: 'outReissueCardSum', label: '下班补卡次数'}, {value: 'lateSum', label: '迟到次数'},
        {value: 'leaveEarlySum', label: '早退次数'},{value: 'overTimeDuration', label: '加班时长'},
        {value: 'leaveTimeDuration', label: '请假时长'},
      ],
      orderList: [{value: 'asc', label: '正序'}, {value: 'desc', label: '倒序'}]
    };
  },
  computed: {
    ...mapState(['userInfo']),
    defaultTime() {
      const startTime = moment()
          .subtract(6, "days")
          .format("YYYY-MM-DD 00:00:00");
      const endTime = moment().format("YYYY-MM-DD 23:59:59");
      return startTime + "," + endTime;
    },
    pickerOptions() {
      return {
        onPick: ({ minDate, maxDate }) => {
          this.minDate = minDate;
          this.maxDate = maxDate;
        },
        disabledDate: (date) => {
          if (this.minDate && !this.maxDate) {
            const sel = moment(this.minDate);
            const [amount, unit] = [1, "month"];
            const allowStart = sel.clone().subtract(amount, unit);
            const allowEnd = sel.clone().add(amount, unit);
            return !moment(date).isBetween(allowStart, allowEnd);
          } else {
            return false;
          }
        },
      };
    },
  },

  watch: {},

  mounted() {},

  methods: {
    onSelectReady() {
      const searchParams = this.$refs.select.getSearchParams();
      Object.assign(searchParams, {tenantId: this.userInfo.tenantId})
      this.params = { ...searchParams };
      Object.assign(this.listParams, {tenantId: this.userInfo.tenantId})
      this.table.config.url = "/Statistics/StatisticsRanking/selectPage";
    },
    getSearchParams(searchParams) {
      Object.assign(searchParams, {tenantId: this.userInfo.tenantId})
      if (!searchParams.time || Object.keys(searchParams).length <= 0) {
        this.$message.info("请选择时间");
        return;
      }
      if (searchParams.employeeId && searchParams.departmentId) {
        this.$message.error("员工和部门仅能选择其中一个进行查询!");
        return;
      }
      this.params = { ...searchParams };
    },
  },
};
</script>

<style lang="less" scoped>
.routine-inspection-container {
  display: flex;
  flex-direction: column;

  .bg-color {
    background-color: #fff;
  }

  .select-bar {
    flex: none;
    padding: 24px 24px 14px;
    margin-bottom: 16px;
    border-radius: 8px;

    .ui-table-select {
      position: relative;
      padding-right: 100px;

      &.has-reset {
        padding-right: 200px;
      }

      ::v-deep .submit-item {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 0;
        margin-bottom: 0;
      }
    }
  }

  .chart-container {
    //flex: none;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px 10px;
    //justify-content: space-between;

    .chart-items {
      display: flex;
      gap: 0 10px;

      .chart-item {
        height: 300px;
        border-radius: 8px;
        padding: 16px 24px;

        //& + .chart-item {
        //  margin-left: 16px;
        //}
      }
    }



    .inspection-results-chart {
      flex: 1;
      //min-min-width: 700px;
    }

    .situation-chart {
      flex: 1;
    }
  }

  .table-wrap {
    flex: 1;
    min-height: 488px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 18px;

    .title {
      padding: 16px 24px 0;
      font-weight: 900;
      display: flex;
      align-items: center;
      color: #0054fe;

      &::before {
        content: "";
        display: block;
        min-width: 3px;
        height: 14px;
        background: #0054fe;
        margin-right: 6px;
      }
    }

    .table-fill-view {
      padding: 4px;
    }
  }
}
</style>
